<!--
  * 现金明细
  *
-->
<template>
  <div style="margin: 20px 0">
    <!---------- 查询表单form begin ----------->
    <a-form>
      <a-row :gutter="[8, 10]">
        <a-col :span="5.5">
          <a-form-item label="单据日期" class="smart-margin-bottom0">
            <custom-range-picker v-model:value="from.create_time" />
          </a-form-item>
        </a-col>
        <a-col :span="5">
          <a-form-item label="结算状态" class="smart-margin-bottom0">
            <a-radio-group v-model:value="from.settlement_status" @change="onSearch">
              <a-radio-button value="0">全部</a-radio-button>
              <a-radio-button value="1">未结算</a-radio-button>
              <a-radio-button value="2">已结算</a-radio-button>
            </a-radio-group>
          </a-form-item>
        </a-col>
        <a-col :span="5">
          <a-button-group>
            <a-button type="primary" html-type="submit" @click="onSearch" v-privilege="'goods:query'">
              <template #icon>
                <SearchOutlined />
              </template>
              查询
            </a-button>
            <a-button @click="refreshTable" v-privilege="'goods:query'">
              <template #icon>
                <ReloadOutlined />
              </template>
              重置
            </a-button>
          </a-button-group>
        </a-col>
      </a-row>
    </a-form>
  </div>

  <div>
    <a-table :loading="tableLoading" :dataSource="tableData" :columns="columns" :scroll="{ x: 'max-content' }" :pagination="false" rowKey="id" size="small" bordered>
      <template #bodyCell="{ text, record, index, column }">
        <template v-if="column.dataIndex === 'status'">
          <span>{{ text == 4 ? '已结算' : '未结算' }}</span>
        </template>
        <template v-if="column.dataIndex === 'order_total_price'">
          <span>{{ Number(text).toFixed(2) }}</span>
        </template>
      </template>
    </a-table>
    <div class="smart-query-table-page">
      <a-pagination showSizeChanger showQuickJumper show-less-items :pageSizeOptions="PAGE_SIZE_OPTIONS" :defaultPageSize="queryForm.limit" v-model:current="queryForm.page" v-model:pageSize="queryForm.limit" :total="total" @change="queryData" @showSizeChange="queryData" :show-total="() => `共${total}条`" />
    </div>
  </div>
</template>
<script setup lang="ts">
import CustomRangePicker from '@/components/business/custom-range-picker/index.vue'
import { reactive, watch } from 'vue'
import { storeApi } from '@/api/business/data/store-api'
import { PAGE_SIZE_OPTIONS, DEFAULT_TIME_RANGE } from '@/constants/system/common-const'
import { useQuery } from '@/hooks/web/use-query-hook'

const from = ref({
  create_time: DEFAULT_TIME_RANGE.value,
  settlement_status: '0'
})

const props = defineProps({
  enterpriseId: {
    type: Number,
    default: null
  }
})

const columns = reactive([
  {
    title: '单据编号',
    dataIndex: 'no'
  },
  {
    title: '门店',
    dataIndex: ['store', 'store_name']
  },
  {
    title: '订单金额',
    dataIndex: 'order_total_price'
  },
  {
    title: '业务员',
    dataIndex: ['salesman', 'rename']
  },
  {
    title: '司机',
    dataIndex: ['delivery', 'driver', 'name']
  },
  {
    title: '结算状态',
    dataIndex: 'status'
  },
  {
    title: '结算金额',
    dataIndex: ['sign', 'sign_amount']
  },
  {
    title: '结算日期',
    dataIndex: ['sign', 'create_time']
  },
  {
    title: '结算备注',
    dataIndex: ['sign', 'sign_remark']
  },
  {
    title: '签收日期',
    dataIndex: ['sign', 'create_time']
  },
  {
    title: '备注',
    dataIndex: 'remark'
  }
])

// --------------------------- 查询 ---------------------------
const { queryForm, tableData, tableLoading, total, resetQuery, onSearch, queryData, deleteData } = useQuery({
  fetchDataApi: async (params) => {
    const data = {
      ...params,
      ...from.value,
      id: props.enterpriseId.id,
      details_type: 1
    }
    const res = await storeApi.detailsStore(data)
    return {
      list: res.data.data,
      total: res.data.total
    }
  },
  queryFormFilter: {},
  queryFormOp: {}
})
// 重置
const refreshTable = () => {
  from.value = {
    create_time: DEFAULT_TIME_RANGE.value,
    settlement_status: '0'
  }
  resetQuery()
}

watch(
  () => props.enterpriseId,
  (e) => {
    if (e) {
      queryData()
    }
  },
  { immediate: true }
)
</script>

<style scoped lang="less">
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20px 0;
}

.button-style {
  margin: 0 10px;
}
</style>
